<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../resource/jquery-2.1.1.js"></script>
    <!--<script src="../resource/highchart/highcharts-all.js"></script>-->
    <script src="../resource/highchart/highstock.src.js"></script>
    <script src="../resource/highchart/highcharts-more.src.js"></script>
</head>
<body>
<div class="chart" style="height: 500px;">

</div>
<script>
    $(function () {
        var dataset = [
            [1230771600000, -5.8, 0.1],
            [1230858000000, -4.1, 1.4],
            [1230944400000, -0.5, 4.1],
            [1231030800000, -8.9, -0.7],
            [1231117200000, -9.7, -3.7],
            [1231203600000, -3.4, 3.2],
            [1231290000000, -3.9, -0.2],
            [1231376400000, -2.4, 6.7],
            [1231462800000, 3.8, 6.9],
            [1231549200000, 3.1, 6.8],
            [1231635600000, 0.0, 7.6],
            [1231722000000, 5.6, 9.4],
            [1231808400000, 3.6, 6.5],
            [1231894800000, -3.6, 3.8],
            [1231981200000, -6.0, -1.5],
            [1232067600000, -3.8, 2.4],
            [1232154000000, 1.5, 4.2],
            [1232240400000, 0.0, 4.5],
            [1232326800000, -1.1, 3.6],
            [1232413200000, 0.5, 5.1],
            [1232499600000, 0.0, 2.5],
            [1232586000000, -0.6, 2.1],
            [1232672400000, 0.8, 4.7],
            [1232758800000, 0.6, 4.4],
            [1232845200000, -3.9, 1.4],
            [1232931600000, -4.3, 2.0],
            [1233018000000, -6.1, -0.4],
            [1233104400000, -0.3, 1.9],
            [1233190800000, -2.9, 2.7],
            [1233277200000, -4.0, -1.0],
            [1233363600000, -4.4, -1.9],
        ];

        $(".chart").highcharts({
            title: {
                text: ""
            },
            chart: {
                height: 300,
                type: 'arearange',
            },
            credits: { enabled: false },
            rangeSelector: {
                buttons: [],
                inputEnabled: false,
                selected: 1,
                enabled: false
            },
            tooltip: {
                xDateFormat: '%Y-%m-%d %H:%M:%S',
                valueSuffix: '',
                crosshairs: true,
                shared: true
            },

            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%Y-%m-%d',
                    week: '%Y-%m-%d',
                    month: '%Y-%m',
                    year: '%Y'
                }
            },
            legend: {
                enabled: true,
                shadow: false
            },
            yAxis: [
                {
                    title: {
                        text: '温度'
                    }
                }

            ],
            series: [
                {
                    name: 'Temperatures',
                    data: dataset
                }
            ],
            plotOptions: {
                line: {
                    connectNulls: true
                }
            }
        })

    });
</script>

</body>
</html>